<template>
	<div>
		<!-- 选择文件 -->
		<el-dialog title="添加记录文件" append-to-body :visible.sync="showJLFilesAction" width="50%" :before-close="close">
			<el-form inline model="form" size="small" @keyup.enter.native="refreshList()">
				<el-form-item label="文件名称:" prop="name"><el-input v-model="form.name" class="w160" placeholder="请输入"></el-input></el-form-item>
				<el-form-item label="文件编号:" prop="name"><el-input v-model="form.fileNumber" class="w160" placeholder="请输入"></el-input></el-form-item>
				<el-form-item>
					<el-button type="primary" @click="refreshList(1)">查询</el-button>
					<el-button type="default" plain @click="resetSearch">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="alljiluList" ref="table" height="450px" header-row-class-name="gray_bg" :row-style="rowStyle" v-loading="loading" @select="handleSelectionChange">
				<el-table-column type="selection" width="30" :selectable="selectable"></el-table-column>
				<el-table-column label="文件编号" prop="fileNumber" :width="getAdaptionWidth('fileNumber', alljiluList)"></el-table-column>
				<el-table-column label="文件版本号" prop="versionNumber" :width="getAdaptionWidth('versionNumber', alljiluList)"></el-table-column>
				<el-table-column label="文件名称" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tooltip effect="dark" content="文件已加密" placement="top-start" v-if="scope.row.isEncryption == 1">
							<div class="flex_start">
								<span class="pointer f14 main_co">{{ scope.row.name }}</span>
								<el-icon class="iconfont icon-bofangqi-suoping ml10"></el-icon>
							</div>
						</el-tooltip>
						<span class="pointer f14 main_co" v-else @click="preContent(scope.row,4)">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="220">
					<template slot-scope="scope">
						<el-button class="pointer f12" size="mini" @click="pre(scope.row)" v-if="scope.row.isSystemCover == 1">封面预览</el-button>
						<span class="" v-else style="width:100px;height: 28px;display: inline-block;"></span>
						<el-button class="pointer f12" size="mini" v-if="scope.row.isEncryption == 1" @click="applyShow(scope.row, 'file')">申请解密</el-button>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer flex_between">
				<!-- <el-button @click="showJLFilesAction = false">取 消</el-button> -->
				<el-button type="primary" size="small" @click="onConfirm">确 定</el-button>
				<el-pagination
					@size-change="sizeChangeHandle"
					@current-change="currentChangeHandle"
					:current-page="pageNo"
					:page-size="pageSize"
					:total="total"
					background
					layout="total, prev, pager, next, jumper"
				></el-pagination>
			</span>
		</el-dialog>
		<encryption :list="rowFileList" ref="encryption"></encryption>
		<pdf :pdfUrl="src" ref="pdf"></pdf>
	</div>
</template>

<script>
import { getguifanList } from '@/api/myapi/tixiwenjian';
import { getFuzhi } from '@/api/myapi/jiluwenjian';
import pdf from '../pdf/index.vue';
import { fileSuffix } from '@/util/common-data.js';
let WebOfficeSDK = require('@/util/web-office-sdk-v1.1.19.es.js');
const moment = require('moment');
export default {
	components: {
		pdf
	},
	data() {
		return {
			rowFileList: [],
			wpsUrl: '',
			showJLFilesAction: false, //   选择记录文件
			showEncryption: false,
			loading: false,
			disabled: false,
			visible: false,
			alljiluList: [],
			fileList: [],
			pageNo: 1,
			pageSize: 6,
			total: 0,
			form: {},
			src: '',
			rowStyle: {
				height: '48px'
			}
		};
	},
	computed() {},
	created() {
		this.refreshList();
	},
	methods: {
		selectable(row, index) {
			return row.isEncryption == 1 ? false : true;
		},
		pre(item) {
			if (item.templateCover) {
				this.src = item.templateCover;
				this.$refs.pdf.open();
			}
		},
		resetSearch() {
			this.form = {};
			this.pageNo=1;
			this.refreshList();
		},
		handleSelectionChange(selection, row) {
			this.fileList = selection;
		},
		onConfirm() {
			if (this.fileList.length == 0) {
				this.$message.error('请选择文件');
				return;
			}
			if (this.serialNumberType == 0) {
				this.fileList.forEach(item => {
					item.serialNumber = item.fileNumber.replace(/\-/g, '') + item.versionNumber + moment(new Date()).format('YYYYMMDDHHmmss');
				});
			}
			console.log(this.fileList, '原版');
			let arr = [];
			this.fileList.forEach(x => {
				let obj = {};
				obj.id = x.id;
				obj.templateFile = x.templateFile;
				arr.push(obj);
			});
			getFuzhi({ templateFileList: arr }).then(({ data }) => {
				if (data.code == 200 && data.data.length != 0) {
					this.fileList.forEach(x => {
						let find = data.data.find(j => j.id == x.id);
						x.templateFilex = find.url;
					});
				}
			});
			this.$emit('confirm', { type: 'jilu', file: this.fileList });
			this.form={};
			this.showJLFilesAction = false;
		},
		open() {
			this.showJLFilesAction = true;
			this.$nextTick(() => {
				this.$refs.table.clearSelection();
			});
		},
		close(done){
			this.form={};
			done();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageNo = val;
			this.refreshList(val);
		},
		// 获取记录文件
		refreshList(pageNo = 1) {
			this.loading = true;
			getguifanList(
				{
					current: pageNo,
					size: this.pageSize,
					processStatus: 7,
					...this.form
				},
				'systemjilufilesprocess'
			).then(({ data }) => {
				if (data.code == 200) {
					this.alljiluList = data.data.records;
					this.total = data.data.total;
					this.loading = false;
				}
			});
		}
	}
};
</script>

<style scoped>
.icon-bofangqi-suoping {
	color: #999999;
}
</style>
